<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框</title>
    <link rel="stylesheet" href="./view/输入框/styles.css">
</head>
<body>
<!-- Unnamed (Rectangle) -->
<div id="u3734" class="ax_default heading_1">
    <div id="u3734_div" class=""></div>
    <div id="u3734_text" class="text ">
        <p><span>Input 输入框</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3735" class="ax_default heading_1">
    <div id="u3735_div" class=""></div>
    <div id="u3735_text" class="text ">
        <p><span>概述</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3736" class="ax_default label">
    <div id="u3736_div" class=""></div>
    <div id="u3736_text" class="text ">
        <p><span>基本表单组件，支持 input 和 textarea，并在原生控件基础上进行了功能扩展，可以组合使用。</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3737" class="ax_default label">
    <div id="u3737_div" class=""></div>
    <div id="u3737_text" class="text ">
        <p><span>基础用法</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3738" class="ax_default label">
    <div id="u3738_div" class=""></div>
    <div id="u3738_text" class="text ">
        <p><span>由于Axure对于输入框样式的支持很弱，所以输入框使用形状和输入框联合实现。</span></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3739" class="ax_default" data-left="230" data-top="345" data-width="325" data-height="32">

    <!-- input-border (Rectangle) -->
    <div id="u3740" class="ax_default box_1" data-label="input-border">
        <div id="u3740_div" class=""></div>
        <div id="u3740_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Text Field) -->
    <div id="u3741" class="ax_default text_field">
        <div id="u3741_div" class=""></div>
        <input id="u3741_input" type="text" value="" class="u3741_input"/>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3742" class="ax_default label">
    <div id="u3742_div" class=""></div>
    <div id="u3742_text" class="text ">
        <p><span>尺寸</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3743" class="ax_default label">
    <div id="u3743_div" class=""></div>
    <div id="u3743_text" class="text ">
        <p><span>输入框有三种尺寸：大、默认（中）、小</span></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3744" class="ax_default" data-left="972" data-top="345" data-width="160" data-height="32">

    <!-- input-border (Rectangle) -->
    <div id="u3745" class="ax_default box_1" data-label="input-border">
        <div id="u3745_div" class=""></div>
        <div id="u3745_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Text Field) -->
    <div id="u3746" class="ax_default text_field">
        <div id="u3746_div" class=""></div>
        <input id="u3746_input" type="text" value="" class="u3746_input"/>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3747" class="ax_default" data-left="800" data-top="345" data-width="160" data-height="36">

    <!-- input-border (Rectangle) -->
    <div id="u3748" class="ax_default box_1" data-label="input-border">
        <div id="u3748_div" class=""></div>
        <div id="u3748_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Text Field) -->
    <div id="u3749" class="ax_default text_field">
        <div id="u3749_div" class=""></div>
        <input id="u3749_input" type="text" value="" class="u3749_input"/>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3750" class="ax_default" data-left="1142" data-top="345" data-width="160" data-height="24">

    <!-- input-border (Rectangle) -->
    <div id="u3751" class="ax_default box_1" data-label="input-border">
        <div id="u3751_div" class=""></div>
        <div id="u3751_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Text Field) -->
    <div id="u3752" class="ax_default text_field">
        <div id="u3752_div" class=""></div>
        <input id="u3752_input" type="text" value="" class="u3752_input"/>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3753" class="ax_default label">
    <div id="u3753_div" class=""></div>
    <div id="u3753_text" class="text ">
        <p><span>可清空</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3754" class="ax_default label">
    <div id="u3754_div" class=""></div>
    <div id="u3754_text" class="text ">
        <p><span>通过输入框的Onfocus事件制作的清空效果</span></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3755" class="ax_default" data-left="230" data-top="478" data-width="325" data-height="32">

    <!-- input-border (Rectangle) -->
    <div id="u3756" class="ax_default box_1" data-label="input-border">
        <div id="u3756_div" class=""></div>
        <div id="u3756_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Text Field) -->
    <div id="u3757" class="ax_default text_field">
        <div id="u3757_div" class=""></div>
        <input id="u3757_input" type="text" value="" class="u3757_input"/>
    </div>

    <!-- input-clear-btn (Ellipse) -->
    <div id="u3758" class="ax_default ellipse ax_default_hidden" data-label="input-clear-btn" style="display:none; visibility: hidden">
        <img id="u3758_img" class="img " src="assets/images/输入框/input-clear-btn_u3758.svg"/>
        <div id="u3758_text" class="text ">
            <p><span></span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3759" class="ax_default label">
    <div id="u3759_div" class=""></div>
    <div id="u3759_text" class="text ">
        <p><span>带Icon的输入框</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3760" class="ax_default label">
    <div id="u3760_div" class=""></div>
    <div id="u3760_text" class="text ">
        <p><span>可以在背景框中输入字符或图标来增加指示内容</span></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3761" class="ax_default" data-left="800" data-top="478" data-width="225" data-height="32">

    <!-- input-border (Rectangle) -->
    <div id="u3762" class="ax_default box_1" data-label="input-border">
        <div id="u3762_div" class=""></div>
        <div id="u3762_text" class="text ">
            <p><span></span></p>
        </div>
    </div>

    <!-- Unnamed (Text Field) -->
    <div id="u3763" class="ax_default text_field">
        <div id="u3763_div" class=""></div>
        <input id="u3763_input" type="text" value="" class="u3763_input"/>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3764" class="ax_default label">
    <div id="u3764_div" class=""></div>
    <div id="u3764_text" class="text ">
        <p><span>前缀和后缀图标</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3765" class="ax_default label">
    <div id="u3765_div" class=""></div>
    <div id="u3765_text" class="text ">
        <p><span>通过设置背景边框左或右对齐并调整输入框位置来实现</span></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3766" class="ax_default" data-left="230" data-top="611" data-width="160" data-height="32">

    <!-- input-border (Rectangle) -->
    <div id="u3767" class="ax_default box_1" data-label="input-border">
        <div id="u3767_div" class=""></div>
        <div id="u3767_text" class="text ">
            <p><span></span></p>
        </div>
    </div>

    <!-- Unnamed (Text Field) -->
    <div id="u3768" class="ax_default text_field">
        <div id="u3768_div" class=""></div>
        <input id="u3768_input" type="text" value="" class="u3768_input"/>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3769" class="ax_default" data-left="403" data-top="611" data-width="160" data-height="32">

    <!-- input-border (Rectangle) -->
    <div id="u3770" class="ax_default box_1" data-label="input-border">
        <div id="u3770_div" class=""></div>
        <div id="u3770_text" class="text ">
            <p><span></span></p>
        </div>
    </div>

    <!-- Unnamed (Text Field) -->
    <div id="u3771" class="ax_default text_field">
        <div id="u3771_div" class=""></div>
        <input id="u3771_input" type="text" value="" class="u3771_input"/>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3772" class="ax_default label">
    <div id="u3772_div" class=""></div>
    <div id="u3772_text" class="text ">
        <p><span>搜索框</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3773" class="ax_default label">
    <div id="u3773_div" class=""></div>
    <div id="u3773_text" class="text ">
        <p><span>在输入框的右边增加按钮，并调整圆角即可实现</span></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3774" class="ax_default" data-left="800" data-top="612" data-width="325" data-height="32">

    <!-- input-border (Rectangle) -->
    <div id="u3775" class="ax_default box_1" data-label="input-border">
        <div id="u3775_div" class=""></div>
        <div id="u3775_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Text Field) -->
    <div id="u3776" class="ax_default text_field">
        <div id="u3776_div" class=""></div>
        <input id="u3776_input" type="text" value="" class="u3776_input"/>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u3777" class="ax_default box_1">
        <img id="u3777_img" class="img " src="assets/images/输入框/u3777.svg"/>
        <div id="u3777_text" class="text ">
            <p><span></span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3778" class="ax_default" data-left="800" data-top="654" data-width="368" data-height="32">

    <!-- Unnamed (Group) -->
    <div id="u3779" class="ax_default" data-left="800" data-top="654" data-width="325" data-height="32">

        <!-- input-border (Rectangle) -->
        <div id="u3780" class="ax_default box_1" data-label="input-border">
            <div id="u3780_div" class=""></div>
            <div id="u3780_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- Unnamed (Text Field) -->
        <div id="u3781" class="ax_default text_field">
            <div id="u3781_div" class=""></div>
            <input id="u3781_input" type="text" value="" class="u3781_input"/>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u3782" class="ax_default box_1">
        <div id="u3782_div" class=""></div>
        <div id="u3782_text" class="text ">
            <p><span></span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3783" class="ax_default" data-left="800" data-top="696" data-width="392" data-height="32">

    <!-- Unnamed (Group) -->
    <div id="u3784" class="ax_default" data-left="800" data-top="696" data-width="325" data-height="32">

        <!-- input-border (Rectangle) -->
        <div id="u3785" class="ax_default box_1" data-label="input-border">
            <div id="u3785_div" class=""></div>
            <div id="u3785_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- Unnamed (Text Field) -->
        <div id="u3786" class="ax_default text_field">
            <div id="u3786_div" class=""></div>
            <input id="u3786_input" type="text" value="" class="u3786_input"/>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u3787" class="ax_default box_1">
        <div id="u3787_div" class=""></div>
        <div id="u3787_text" class="text ">
            <p><span>Search</span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3788" class="ax_default" data-left="230" data-top="858" data-width="300" data-height="80">

    <!-- input-area-border (Rectangle) -->
    <div id="u3789" class="ax_default box_1" data-label="input-area-border">
        <div id="u3789_div" class=""></div>
        <div id="u3789_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Text Area) -->
    <div id="u3790" class="ax_default text_area">
        <div id="u3790_div" class=""></div>
        <textarea id="u3790_input" class="u3790_input"></textarea>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3791" class="ax_default label">
    <div id="u3791_div" class=""></div>
    <div id="u3791_text" class="text ">
        <p><span>文本域</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3792" class="ax_default label">
    <div id="u3792_div" class=""></div>
    <div id="u3792_text" class="text ">
        <p><span>Axure无法支持支持拖拽调整文本域大小的同时改变边框，所以调整大小的动效暂时不支持。</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3793" class="ax_default label">
    <div id="u3793_div" class=""></div>
    <div id="u3793_text" class="text ">
        <p><span>禁用状态</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3794" class="ax_default label">
    <div id="u3794_div" class=""></div>
    <div id="u3794_text" class="text ">
        <p><span>由于文本框的disabled状态和外框的disabled状态无法同步样式，所以对于禁用状态的输入框单独做了一份样式。</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3795" class="ax_default box_1">
    <div id="u3795_div" class=""></div>
    <div id="u3795_text" class="text ">
        <p><span>Enter something...</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3796" class="ax_default box_1">
    <div id="u3796_div" class=""></div>
    <div id="u3796_text" class="text ">
        <p><span>Enter something...</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3797" class="ax_default label">
    <div id="u3797_div" class=""></div>
    <div id="u3797_text" class="text ">
        <p><span>复合型输入框</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3798" class="ax_default label">
    <div id="u3798_div" class=""></div>
    <div id="u3798_text" class="text ">
        <p><span>在输入框的外部增加按钮或文本框即可</span></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3799" class="ax_default" data-left="230" data-top="1065" data-width="441" data-height="32">

    <!-- input-border (Rectangle) -->
    <div id="u3800" class="ax_default box_1" data-label="input-border">
        <div id="u3800_div" class=""></div>
        <div id="u3800_text" class="text ">
            <p><span>http://</span></p>
        </div>
    </div>

    <!-- input-border (Rectangle) -->
    <div id="u3801" class="ax_default box_1" data-label="input-border">
        <div id="u3801_div" class=""></div>
        <div id="u3801_text" class="text ">
            <p><span>.com</span></p>
        </div>
    </div>

    <!-- Unnamed (Group) -->
    <div id="u3802" class="ax_default" data-left="294" data-top="1065" data-width="325" data-height="32">

        <!-- input-border (Rectangle) -->
        <div id="u3803" class="ax_default box_1" data-label="input-border">
            <div id="u3803_div" class=""></div>
            <div id="u3803_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- Unnamed (Text Field) -->
        <div id="u3804" class="ax_default text_field">
            <div id="u3804_div" class=""></div>
            <input id="u3804_input" type="text" value="" class="u3804_input"/>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3805" class="ax_default" data-left="230" data-top="1107" data-width="479" data-height="32">

    <!-- input-border (Rectangle) -->
    <div id="u3806" class="ax_default box_1" data-label="input-border">
        <div id="u3806_div" class=""></div>
        <div id="u3806_text" class="text ">
            <p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">http://&nbsp; </span><span style="font-family:'Ionicons';"></span></p>
        </div>
    </div>

    <!-- input-border (Rectangle) -->
    <div id="u3807" class="ax_default box_1" data-label="input-border">
        <div id="u3807_div" class=""></div>
        <div id="u3807_text" class="text ">
            <p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">.com&nbsp; </span><span style="font-family:'Ionicons';"></span></p>
        </div>
    </div>

    <!-- Unnamed (Group) -->
    <div id="u3808" class="ax_default" data-left="317" data-top="1107" data-width="325" data-height="32">

        <!-- input-border (Rectangle) -->
        <div id="u3809" class="ax_default box_1" data-label="input-border">
            <div id="u3809_div" class=""></div>
            <div id="u3809_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- Unnamed (Text Field) -->
        <div id="u3810" class="ax_default text_field">
            <div id="u3810_div" class=""></div>
            <input id="u3810_input" type="text" value="" class="u3810_input"/>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3811" class="ax_default" data-left="230" data-top="1149" data-width="427" data-height="32">

    <!-- input-border (Rectangle) -->
    <div id="u3812" class="ax_default box_1" data-label="input-border">
        <div id="u3812_div" class=""></div>
        <div id="u3812_text" class="text ">
            <p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Day&nbsp; </span><span style="font-family:'Ionicons';"></span></p>
        </div>
    </div>

    <!-- input-border (Rectangle) -->
    <div id="u3813" class="ax_default box_1" data-label="input-border">
        <div id="u3813_div" class=""></div>
        <div id="u3813_text" class="text ">
            <p><span></span></p>
        </div>
    </div>

    <!-- Unnamed (Group) -->
    <div id="u3814" class="ax_default" data-left="298" data-top="1149" data-width="325" data-height="32">

        <!-- input-border (Rectangle) -->
        <div id="u3815" class="ax_default box_1" data-label="input-border">
            <div id="u3815_div" class=""></div>
            <div id="u3815_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- Unnamed (Text Field) -->
        <div id="u3816" class="ax_default text_field">
            <div id="u3816_div" class=""></div>
            <input id="u3816_input" type="text" value="" class="u3816_input"/>
        </div>
    </div>
</div>
</body>
</html>
